<!DOCTYPE html>
<html lang="zh" mode="light" xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="~{theme/Grace/common :: meta}"></div>
    <meta property="og:title" th:content="${'归档 | ' + #servletContext.getAttribute('configMap')['blog_name']}" />
    <title>归档 | [[${#servletContext.getAttribute('configMap')['blog_name']}]]</title>
    <div th:replace="~{theme/Grace/common :: link}"></div>
</head>

<body>
<!-- 导航 -->
<div th:replace="~{theme/Grace/common :: nav}"></div>
    <div class="wrap" id="wrap">
        <!-- 头部 -->
        <header class="header">
            <!-- 封面 -->
            <div class="cover">
                <span th:if="${#strings.startsWith(currentNav.cover,'http')}">
                    <img class="lazyload" th:data-original="@{${currentNav.cover}}">
                </span>
                <span th:if="${#strings.startsWith(currentNav.cover,'http') == false}">
                    <img class="lazyload" th:data-original="@{${prefix} + '/source/images/archive.png'}">
                </span>
            </div>

            <!-- 商标 -->
            <div class="brand animate-box" data-animate-effect="fadeIn">
                <p class="title"><span class="title-head">『</span> 归档 <span class="title-tail">』</span></p>
                <p class="sub-title"></p>
            </div>
        </header>
        <!-- 主要内容 -->
        <main class="main">
            <div class="container">
                <div class="posts-collapse archive">
                    <span class="desc animate-box" data-animate-effect="fadeInDown">
                        <span th:if="${pageInfo.total < 30}">嗯..! 目前共计 [[${pageInfo.total}]] 篇日志。 继续努力。</span>
                        <span th:if="${pageInfo.total >= 30 and pageInfo.total < 50}">OK! 目前共计 [[${pageInfo.total}]] 篇日志。 继续努力。</span>
                        <span th:if="${pageInfo.total >= 50 and pageInfo.total < 80}">好! 目前共计 [[${pageInfo.total}]] 篇日志。 继续努力。</span>
                        <span th:if="${pageInfo.total >= 80 and pageInfo.total < 130}">很好! 目前共计 [[${pageInfo.total}]] 篇日志。 继续努力。</span>
                        <span th:if="${pageInfo.total >= 130 and pageInfo.total < 210}">非常好! 目前共计 [[${pageInfo.total}]] 篇日志。 继续努力。</span>
                        <span th:if="${pageInfo.total >= 210}">太棒了! 目前共计 [[${pageInfo.total}]] 篇日志。 继续努力。</span>
                    </span>
                    <div class="post-list" th:each="map,iterStat : ${pageInfo.data}">
                        <div class="collection-title">
                            <h2 class="archive-year animate-box"  data-animate-effect="fadeInDown">[[${map.key}]]</h2>
                        </div>
                        <article class="post" th:each="vo,iterStat : ${map.value}">
                            <header class="post-header" th:data-index="${iterStat.index}">
                                <h3 class="post-title">
                                <a data-pjax class="post-title-link" th:href="@{'/' + ${vo.link}}" >
                                    <span>[[${vo.title}]]</span>
                                </a>
                            </h3>
                                <div class="post-meta">
                                    <time class="post-time">
                                        📅 [[${vo.month} + '-' + ${vo.day}]]
                                    </time>
                                </div>
                            </header>
                        </article>
                    </div>
                </div>
                <div class="pagination animate-box">
                    <span th:if="${pageInfo.hasPreviousPage}" class="page">
                        <a data-pjax class="prev page-numbers" th:href="@{${pageInfo.pageNum-1} == 1 ? '/archives/' : '/archives/page/' + ${pageInfo.pageNum-1}+'/'}" ><i class="fa fa-angle-left"></i></a>
                    </span>
                            <span th:each="pageNum : ${pageInfo.navigatepageNums}" th:if="${pageInfo.navigatepageNums.length} le '4' ">
                        <span th:if="${pageNum == pageInfo.pageNum}"  class="page current" th:text="${pageNum}"></span>
                        <span class="page" th:if="${pageNum != pageInfo.pageNum}">
                            <a data-pjax th:href="@{'/archives/page/' + ${pageNum}+'/'}" th:text="${pageNum}"></a>
                        </span>
                    </span>
                    <span th:each="pageNum, iterStat : ${pageInfo.navigatepageNums}" th:if="${pageInfo.navigatepageNums.length} gt '4' ">
                       <span class="page omit" th:if="${pageNum == pageInfo.pageNum and iterStat.count gt 2 and iterStat.count le iterStat.size}">...</span>
                       <span th:if="${pageNum == pageInfo.pageNum}" class="page current" th:text="${pageNum}"></span>
                       <span class="page omit" th:if="${pageNum == pageInfo.pageNum and iterStat.count le (iterStat.size - 2)}">...</span>
                       <span th:if="${pageNum != pageInfo.pageNum}">
                           <span class="page" th:if="${iterStat.count == 1}" ><a data-pjax th:href="@{'/archives/page/1/'}" th:text="1"></a></span>
                           <span class="page" th:if="${iterStat.count == (iterStat.size)}"><a data-pjax th:href="@{'/archives/page/' + ${pageNum}+'/'}" th:text="${pageNum}"></a></span>
                        </span>
                   </span>
                   <span th:if="${pageInfo.hasNextPage}" class="page">
                        <a data-pjax class="next page-numbers" th:href="@{'/archives/page/' + ${pageInfo.pageNum+1}+'/'}" ><i class="fa fa-angle-right"></i></a>
                    </span>
                </div>
            </div>
        </main>
    </div>
    <!-- 尾部 -->
    <div th:replace="~{theme/Grace/common :: footer}"></div>
    <div th:replace="~{theme/Grace/common :: script}"></div>
</body>

</html>
